<template>
  <div class="right_nav">
    <CardVue class="nav_card">
      <template v-slot:content>
        <NavTitleBox>
          <template v-slot:title>
            <span>分类专题</span>
          </template>
        </NavTitleBox>
        <div class="nav_catgry">
          <span
            v-for="(item, index) in catgryList"
            @click="getCaculateType(item)"
            :key="item.id"
            >{{ item.name }}</span
          >
        </div>
      </template>
    </CardVue>

    <CardVue class="nav_card">
      <template v-slot:content>
        <NavTitleBox>
          <template v-slot:title>
            <span>热门文章</span>
          </template>
        </NavTitleBox>
        <div class="nav_coneict">
          <ForIcon :icon="{ src: email, text: '邮箱' }"></ForIcon>
          <ForIcon :icon="{ src: QQ, text: 'QQ' }"></ForIcon>
          <ForIcon :icon="{ src: weChat, text: '微信' }"></ForIcon>
        </div>
      </template>
    </CardVue>

    <CardVue class="nav_info">
      <template v-slot:content>
        <NavTitleBox>
          <template v-slot:title>
            <span>网站统计</span>
          </template>
        </NavTitleBox>
        <div class="nav_info">
          <div>累计发布：<span>100</span></div>
          <div>总点赞量：<span>100</span></div>
          <div>累计运行：<span>100</span></div>
          <div>建站日期：<span>100</span></div>
        </div>
      </template>
    </CardVue>
  </div>
</template>
<script lang="ts" setup>
import CardVue from "@/components/Card.vue";
import NavTitleBox from "@/components/NavTitleBox.vue";
import ForIcon from "../../components/ForIcon.vue";
import email from "@/assets/svg/email.svg";
import QQ from "@/assets/svg/QQ.svg";
import weChat from "@/assets/svg/weChat.svg";
import { useStore } from "vuex";
const store = useStore();

import { ref } from "vue";

interface Catgry {
  id: number;
  name: string;
  hot: number;
  like: number;
}
const catgryList = ref<Catgry[]>([
  { name: "前端笔记", id: 1, hot: 100, like: 100 },
  { name: "后端笔记", id: 2, hot: 100, like: 100 },
  { name: "其他笔记", id: 3, hot: 100, like: 100 },
  { name: "实用工具", id: 4, hot: 100, like: 100 },
  { name: "搭建教程", id: 5, hot: 100, like: 100 },
  { name: "数据可视化", id: 6, hot: 100, like: 100 },
]);

const getCaculateType = (item: object) => {
  store.dispatch("disChangeCaculateType", item.name);
};
</script>
<style lang="scss" scoped>
.right_nav {
  flex: 1;
  margin: 0px 20px;
  border-radius: 20px;
  .nav_card {
    border-radius: 10px;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
  }
  .nav_catgry {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0px;

    span {
      text-align: left;
      width: 50%;
      font-size: $fs_mid;
      line-height: 24px;
      color: #666;
      &:hover {
        cursor: pointer;
        color: #8484ff;
      }
    }
  }
  .nav_coneict {
    display: flex;
    margin: 20px 0px;
    justify-content: space-between;
  }
  .nav_info {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 20px 0px;
    div {
      margin: 10px 0px;
    }
  }
}
</style>
